<div class="tiny ui buttons">
    <button class="ui button" (click)="setUnified()" [class.active]="mode === 'unified'">{{'common_unified'
        | translate}}</button>
    <button class="ui button" (click)="setSplit()" [class.active]="mode === 'split'">{{'common_split'
        | translate}}</button>
</div>
<ng-container *ngFor="let i of items">
    <h4 class="ui top attached header">
        <ng-container *ngIf="i.name">{{i.name}}</ng-container>
        <ng-container *ngIf="i.translate">{{i.translate | translate: i.translateData}}</ng-container>
    </h4>
    <div class="ui attached segment">
        <app-diff-item [mode]="mode" [type]="i.type" [original]="i.before" [updated]="i.after"></app-diff-item>
    </div>
</ng-container>
